<template>
  <div class="header">
    <h2 style="width: 100%">菜品数据</h2>
    <a-input-search
        v-model:value="search_name"
        placeholder="搜索菜品"
        style="width: 200px; position: absolute; right: 0; top: 90px"
        @search="search"
      />
  </div>
  <a-table :dataSource="foods_list" :columns="columns" rowKey="id">
    <template #action="{ record }">
      <a-button>
        <router-link :to="{ path: '/comment-room', query: { food_id: record.food_id } }">查看评论区</router-link>
      </a-button>
      <!-- <text v-if="column.dataIndex == 'on_sale'">abc</text> -->
    </template>
  </a-table>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            search_name: "", 
            foods_list: [],
            shop_id: 0,
            columns: [
                { title: '菜品名称', dataIndex: 'name', key: 'name' },
                { title: '月销量', dataIndex: 'month_sales', key: 'month_sales', sorter: {
                      compare: (a, b) => a.month_sales - b.month_sales,
                      multiple: 3
                    }
                },
                { title: '评分', dataIndex: 'rating', key: 'rating', sorter: {
                    compare: (a, b) => a.rating - b.rating,
                    multiple: 2
                  } 
                }, 
                // { title: '价格', dataIndex: 'price', key: 'price', width: 100 },
                // { title: '分类', dataIndex: 'categories', key: 'categories' },
                // { title: '描述', dataIndex: 'description', key: 'description', ellipsis: true },
                // { title: '折扣', dataIndex: 'discount', key: 'discount', width: 100 },
                // { title: '图片url', dataIndex: 'img_url' , key: 'image', ellipsis: true },
                // { title: '是否上架', dataIndex: 'on_sale', key: 'on_sale', width: 100 }, 
                // { title: '查看评论区', key: 'action', slots: { customRender: 'action' } },
            ]
        };
    },

    mounted: function() {
// 判断是否登录
    if (!this.$store.state.is_login)
    {
        alert("未登录，请先登录!")
       this.$router.push('/');
       return;
    }

        // 获取商店id
        this.shop_id = this.$store.state.shop_id;

        // 请求获取食品信息
        axios.get('/shop/getMenuByShopId', {
            params: {
                shop_id: this.shop_id
            }
        }).then((res)=>{
            this.foods_list = res.data;
            console.log(this.foods_list);
        });
    },

    methods: {
      search()
      {
         axios.get('/shop/getMenuByShopId', {
          params: {
                shop_id: this.shop_id
            }
         }).then((res)=>{
          this.foods_list = [];
          for (let item in res.data)
          {
             if (res.data[item].name.includes(this.search_name))
              {
                this.foods_list.push(res.data[item]);
              }
          }
         });
      }
    }
}
</script>

 <style scoped>
.header{
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* align-items: center; */
}
</style>